<template>
    <div class="aside">
        <svg class="delete" aria-hidden="true" @click="del()">
            <use xlink:href="#icon-cha"></use>
        </svg>
        <div class="who">
            <div class="face">
                <van-image v-if="privateInfo.profile" :src="privateInfo.profile" alt="" class="face-img">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template>
                </van-image>
                <!-- <img :src="require(`@/assets/images/noImg.png`)" alt="" v-else class="no-img"> -->
            </div>
            <p class="name">{{privateInfo.uname}}</p>
        </div>
        <ul class="list">
            <li @click="gotoHome()">
                <svg class="icon icon-home" aria-hidden="true">
                    <use xlink:href="#icon-Home"></use>
                </svg>
                <span>主页</span>
            </li>
            <li @click="gotoFavor()">
                <svg class="icon icon-home" aria-hidden="true">
                    <use xlink:href="#icon-aixin"></use>
                </svg>
                <span>赞过</span>
            </li>
            <li>
                <svg class="icon icon-home" aria-hidden="true">
                    <use xlink:href="#icon-Message"></use>
                </svg>
                <span>消息</span>
            </li>
            <li @click="gotoOrder()">
                <svg class="icon icon-home" aria-hidden="true">
                    <use xlink:href="#icon-rili"></use>
                </svg>
                <span>订单</span>
            </li>
            <li @click="gotoProfile()">
                <svg class="icon icon-home" aria-hidden="true">
                    <use xlink:href="#icon-profile"></use>
                </svg>
                <span>个人信息</span>
            </li>
        </ul>
        <div class="log-out" @click="logOut()">
            <svg class="icon icon-home" aria-hidden="true">
                    <use xlink:href="#icon-tuichudenglu"></use>
            </svg>
            <span @click="logOut()">退出登录</span>
        </div>
    </div>
</template>
<script>
import { getuserInfo } from '@/api.js'
export default {
    data(){
        return{
            privateInfo:{}
        }
    },
    created() {
        this.getPrivateInfo()
    },
    methods:{
        gotoOrder(){
            this.$router.push('/order-list')
        },
        gotoProfile(){
            this.$router.push('/profile')
        },
        gotoHome() {
            this.$router.push('/index')
        },
        gotoFavor() {
            this.$router.push('/favor')
        },
        del() {
            this.$router.push('/index')
        },
        logOut(){
            localStorage.removeItem('user')
            this.$router.push('/login')
        },
        async getPrivateInfo(){
            let user = JSON.parse(localStorage.getItem('user'))
            let userInfo ={mail:user}  
            const {data} = await getuserInfo(userInfo)
            this.privateInfo = data
        }
    }
}
</script>
<style lang="less" scoped>
.aside{
    background: linear-gradient(to bottom,rgb(148, 156, 223),rgb(219, 133, 215));
    height:100%;
    width: 100%;
    font-size: 16px;
    color: white;
    padding:20px;
    overflow:hidden;
    position: relative;
    .delete{
        width: 20px;
        height: 20px;
    }
    .who{
        margin: 50px 0px 30px;
        height: 55px;
        display: flex;
        align-items: center;
        .face{
            border-radius: 30px;
            height: 55px;
            width:55px;
            margin-right: 10px;
            border:2px solid white;
            overflow:hidden;
            .face-img {
                width:55px;
            }
            .no-img{
                width: 55px;
            }
        }
    }
    .list{
        li{
            display: flex;
            align-items: center;
            margin-top: 10px;
            .icon-home{
              width: 20px;
              margin-right: 15px;
            }
        }

    }
    .log-out{
        position: absolute;
        bottom:50px;
        display: flex;
         align-items: center;
        .icon-home{
            width: 20px;
            margin-right: 15px;
        }
    }
}
</style>